import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:portal_website/tool/color_util.dart';
import 'package:portal_website/tool/image_network.dart';

import 'pages/common_header.dart';

class SystemPage extends StatelessWidget {
  const SystemPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: ColorsUtil.colorF5F5F5,
      body: SingleChildScrollView(
        child: Container(
          constraints: BoxConstraints(
            minHeight: MediaQuery.of(context).size.height,
          ),
          child: Column(
            children: [
              // 头部导航
              Container(
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color.fromRGBO(30, 87, 153, 1),
                      Color.fromRGBO(32, 124, 202, 1),
                    ],
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    stops: [0, 1],
                    transform: GradientRotation(3.1415926535 / 4),
                  ),
                  borderRadius: BorderRadius.vertical(
                    bottom: Radius.circular(5),
                  ),
                  boxShadow: [
                    BoxShadow(
                      color: Color.fromRGBO(0, 0, 0, 0.1),
                      blurRadius: 10,
                      offset: Offset(0, 2),
                    ),
                  ],
                ),
                padding: const EdgeInsets.symmetric(vertical: 20),
                child: Container(
                  padding: const EdgeInsets.symmetric(horizontal: 20),
                  constraints: const BoxConstraints(maxWidth: 1200),
                  margin: const EdgeInsets.symmetric(horizontal: 20),
                  child: Column(
                    children: [
                      // 桌面端导航布局
                      LayoutBuilder(
                        builder: (context, constraints) {
                          if (constraints.maxWidth > 768) {
                            return Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                const Text(
                                  '创新服务平台',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                NavigationMenu(),
                              ],
                            );
                          } else {
                            // 移动端导航布局
                            return Column(
                              children: [
                                const Text(
                                  '创新服务平台',
                                  style: TextStyle(
                                    color: Colors.white,
                                    fontSize: 24,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                const SizedBox(height: 15),
                                NavigationMenu(),
                              ],
                            );
                          }
                        },
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 30),

              // 主内容区
              Container(
                constraints: const BoxConstraints(maxWidth: 1200),
                padding: const EdgeInsets.symmetric(horizontal: 20),
                width: double.infinity,
                child: Column(
                  children: [
                    // 页面标题
                    const Text(
                      '创新服务门户',
                      style: TextStyle(
                        color: Color.fromRGBO(30, 87, 153, 1),
                        fontSize: 28,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 30),

                    // 信息展示区
                    Section(
                      title: '信息展示',
                      child: InfoGrid(),
                    ),
                    const SizedBox(height: 30),

                    // 应用展示区
                    Section(
                      title: '应用展示',
                      child: AppGrid(),
                    ),
                    const SizedBox(height: 30),

                    // 页脚
                    CommonFooter(
                      links: [
                        {'name': '关于我们'},
                        {'name': '新闻动态'},
                        {'name': '入驻申请'},
                        {'name': '人才招聘'},
                        {'name': '联系我们'},
                      ],
                      copyright: '© 2025 濮阳人工智能创新应用示范基地 版权所有',
                      contactInfo:
                          '地址：河南省濮阳市高新技术开发区人工智能产业园 | 电话：0393-1234567 | 邮箱：info@puyang-ai.com',
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

// 导航菜单组件
class NavigationMenu extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        return Wrap(
          alignment: WrapAlignment.center,
          spacing: constraints.maxWidth > 768 ? 20 : 10,
          children: const [
            NavItem(title: '首页'),
            NavItem(title: '关于我们'),
            NavItem(title: '服务内容'),
            NavItem(title: '新闻动态'),
            NavItem(title: '联系我们'),
          ],
        );
      },
    );
  }
}

// 导航项组件
class NavItem extends StatelessWidget {
  final String title;

  const NavItem({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return TextButton(
      onPressed: () {},
      style: TextButton.styleFrom(
        padding: EdgeInsets.zero,
        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      child: Text(
        title,
        style: const TextStyle(
          color: Colors.white,
          fontSize: 16,
        ),
      ),
    );
  }
}

// 内容区块组件
class Section extends StatelessWidget {
  final String title;
  final Widget child;

  const Section({super.key, required this.title, required this.child});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(5),
        boxShadow: const [
          BoxShadow(
            color: Color.fromRGBO(0, 0, 0, 0.1),
            blurRadius: 10,
            offset: Offset(0, 2),
          ),
        ],
      ),
      padding: const EdgeInsets.all(25),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title,
            style: Theme.of(context).textTheme.titleMedium,
          ),
          const SizedBox(height: 20),
          Container(
            height: 2,
            width: 60,
            color: const Color(0xFFEEEEEE),
            margin: const EdgeInsets.only(bottom: 20),
          ),
          child,
        ],
      ),
    );
  }
}

// 信息卡片网格
class InfoGrid extends StatelessWidget {
  final List<InfoItem> infoItems = const [
    InfoItem(
      title: '动态资讯',
      description: '了解最新的行业动态和平台新闻，掌握第一手资讯。',
      imageUrl:
          'https://img1.baidu.com/it/u=4046500024,151060172&fm=253&fmt=auto&app=138&f=JPEG?w=875&h=500',
    ),
    InfoItem(
      title: '基地风采',
      description: '展示创新基地的优美环境和先进设施，感受创新氛围。',
      imageUrl:
          'https://img1.baidu.com/it/u=4046500024,151060172&fm=253&fmt=auto&app=138&f=JPEG?w=875&h=500',
    ),
    InfoItem(
      title: '媒体报道',
      description: '汇集各大媒体对平台和入驻企业的报道和评价。',
      imageUrl:
          'https://img1.baidu.com/it/u=4046500024,151060172&fm=253&fmt=auto&app=138&f=JPEG?w=875&h=500',
    ),
    InfoItem(
      title: '领导关怀',
      description: '记录各级领导视察指导的珍贵瞬间和重要指示。',
      imageUrl:
          'https://img1.baidu.com/it/u=4046500024,151060172&fm=253&fmt=auto&app=138&f=JPEG?w=875&h=500',
    ),
  ];

  InfoGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        int crossAxisCount = constraints.maxWidth > 768 ? 2 : 1;
        if (constraints.maxWidth > 1024) {
          crossAxisCount = 4;
        } else if (constraints.maxWidth > 768) {
          crossAxisCount = 2;
        }

        return GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: crossAxisCount,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          childAspectRatio: 280 / 320,
          children: infoItems.map((item) => InfoCard(item: item)).toList(),
        );
      },
    );
  }
}

// 信息卡片数据类
class InfoItem {
  final String title;
  final String description;
  final String imageUrl;

  const InfoItem({
    required this.title,
    required this.description,
    required this.imageUrl,
  });
}

// 信息卡片组件
class InfoCard extends StatelessWidget {
  final InfoItem item;

  const InfoCard({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        border: Border.all(color: const Color(0xFFEEEEEE)),
        borderRadius: BorderRadius.circular(5),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(5),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ImageNetwork(
              item.imageUrl,
              height: 180,
              width: double.infinity,
              fit: BoxFit.cover,
            ),
            Padding(
              padding: const EdgeInsets.all(15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    item.title,
                    style: Theme.of(context).textTheme.titleSmall,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 10),
                  Text(
                    item.description,
                    style: Theme.of(context).textTheme.bodyMedium,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                  ),
                  const SizedBox(height: 15),
                  TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(
                      padding: EdgeInsets.zero,
                      tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                    ),
                    child: const Text(
                      '查看更多 →',
                      style: TextStyle(
                        color: Color.fromRGBO(30, 87, 153, 1),
                        fontWeight: FontWeight.bold,
                        fontSize: 14,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      // 添加悬停效果
      transform: Matrix4.identity(),
      // transitionDuration: const Duration(milliseconds: 300),
    );
  }
}

// 应用网格
class AppGrid extends StatelessWidget {
  final List<AppItem> appItems = const [
    AppItem(
      icon: '🧠',
      title: '智算中心',
      description: '提供强大的计算能力和算法支持，助力企业创新发展。',
    ),
    AppItem(
      icon: '📚',
      title: '知识中枢',
      description: '汇集行业知识库和专家资源，一站式知识服务平台。',
    ),
    AppItem(
      icon: '🤖',
      title: '模型中枢',
      description: '各类AI模型和算法库，支持快速开发和部署。',
    ),
    AppItem(
      icon: '🖥️',
      title: '场景应用中心',
      description: '针对不同行业场景的应用解决方案展示和体验。',
    ),
    AppItem(
      icon: '🚀',
      title: '双创公共服务系统',
      description: '为创新创业企业提供全方位的服务和支持。',
    ),
    AppItem(
      icon: '🛒',
      title: '电商服务系统',
      description: '专业的电商平台服务，助力企业拓展线上市场。',
    ),
    AppItem(
      icon: '🎤',
      title: '会务活动服务系统',
      description: '提供会议活动策划、报名、直播等一站式服务。',
    ),
  ];

  AppGrid({super.key});

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(
      builder: (context, constraints) {
        int crossAxisCount = constraints.maxWidth > 768 ? 3 : 1;
        if (constraints.maxWidth > 1024) {
          crossAxisCount = 4;
        } else if (constraints.maxWidth > 768) {
          crossAxisCount = 3;
        }

        return GridView.count(
          shrinkWrap: true,
          physics: const NeverScrollableScrollPhysics(),
          crossAxisCount: crossAxisCount,
          crossAxisSpacing: 20,
          mainAxisSpacing: 20,
          childAspectRatio: 220 / 250,
          children: appItems.map((item) => AppCard(item: item)).toList(),
        );
      },
    );
  }
}

// 应用卡片数据类
class AppItem {
  final String icon;
  final String title;
  final String description;

  const AppItem({
    required this.icon,
    required this.title,
    required this.description,
  });
}

// 应用卡片组件
class AppCard extends StatelessWidget {
  final AppItem item;

  const AppCard({super.key, required this.item});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: const Color(0xFFF9F9F9),
        borderRadius: BorderRadius.circular(5),
      ),
      padding: const EdgeInsets.all(20),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            item.icon,
            style: const TextStyle(fontSize: 40),
          ),
          const SizedBox(height: 15),
          Text(
            item.title,
            style: Theme.of(context).textTheme.titleSmall,
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 10),
          Text(
            item.description,
            style: Theme.of(context).textTheme.bodyMedium,
            textAlign: TextAlign.center,
            maxLines: 3,
            overflow: TextOverflow.ellipsis,
          ),
          const SizedBox(height: 15),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color.fromRGBO(30, 87, 153, 1),
              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 8),
              textStyle: const TextStyle(fontSize: 14),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
              elevation: 0,
            ),
            child: const Text('进入系统'),
          ),
        ],
      ),
      // 添加悬停效果
      transform: Matrix4.identity(),
      // transitionDuration: const Duration(milliseconds: 300),
      // onHover: (hovered) {
      //   // 在实际使用中，可能需要使用StatefulWidget来实现悬停动画
      // },
    );
  }
}
